import React from "react";
import { BrowserRouter, Routes, Route, Navigate, Link } from "react-router-dom"
import { ConfigProvider, Result } from "antd";
import { legacyLogicalPropertiesTransformer, StyleProvider } from "@ant-design/cssinjs";
import zh_CN from "antd/locale/zh_CN";
import { UserProfile } from "../serve/interface";
import { apis } from "./apis";
import { THEME } from "./utils/theme";
import { Header } from "./components/Header"
import { AppList } from "./components/AppList"
import { Editor } from "./components/Editor"
import { CHROME_VERSION } from "./utils/common";

export const App = () => {
    const [profile, setProfile] = React.useState<UserProfile>();
    const loadProfile = async () => {
        apis.profile({}).then(res => {
            setProfile(res.data);
        });
    };
    React.useEffect(() => {
        loadProfile();
    }, []);
    return <StyleProvider
        transformers={[legacyLogicalPropertiesTransformer]}
        hashPriority={CHROME_VERSION >= 90 ? undefined : "high"}>
        <ConfigProvider locale={zh_CN} theme={THEME}>
            <Header profile={profile} />
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<Navigate to="/apps" />} />
                    <Route path="/app/:appId/:itemId?" element={<Editor profile={profile} />} />
                    <Route path="/apps" element={<AppList profile={profile} onChange={setProfile} />} />
                    <Route path="*" element={<Result status="404" title="页面不存在" subTitle={
                        <Link to="/">返回首页</Link>
                    } />} />
                </Routes>
            </BrowserRouter>
        </ConfigProvider>
    </StyleProvider>;
};
